<script setup lang="ts">
import type { PropType } from "vue";
import {
  CheckCircleOutlined,
  StopOutlined,
  FormOutlined,
  DeleteOutlined,
  PlusCircleOutlined
} from "@ant-design/icons-vue";
import { Modal } from "ant-design-vue";

defineOptions({ name: "WebxBtn" });
const emits = defineEmits(["delete"]);
const props = defineProps({
  // 操作符
  operate: { type: String as PropType<OperateProp>, default: "" },
  // 弹框内容
  modalContant: { type: String, default: "确定要操作这条数据吗?" },
  // 按钮内容
  btnText: { type: String, default: "" }
});

const onDelete = () => {
  Modal.confirm({
    title: "温馨提示",
    content: props.modalContant,
    onOk() {
      emits("delete");
    }
  });
};

/**
 * on：启用
 * off：停用
 * edit：编辑
 * del：删除
 * add：添加
 * */
export declare type OperateProp = "on" | "off" | "edit" | "del" | "add";
</script>

<template>
  <div>
    <div class="text-green-500 cursor-pointer" v-if="operate === 'on'">
      <CheckCircleOutlined />
      {{ btnText || "启用" }}
    </div>
    <div class="text-red-500 cursor-pointer" v-if="operate === 'off'">
      <StopOutlined />
      {{ btnText || "停用" }}
    </div>
    <div class="text-blue-500 cursor-pointer" v-if="operate === 'edit'">
      <FormOutlined />
      {{ btnText || "编辑" }}
    </div>
    <div class="text-red-500 cursor-pointer" v-if="operate === 'del'" @click.stop="onDelete">
      <DeleteOutlined />
      {{ btnText || "删除" }}
    </div>
    <div class="text-green-500 cursor-pointer" v-if="operate === 'add'">
      <PlusCircleOutlined />
      {{ btnText || "添加" }}
    </div>
  </div>
</template>

<style scoped lang="less"></style>
